  <template>
  <el-dialog v-model="dialogVisible" title="编辑扩展属性" width="75vw" top="5vh">
    <div>
      <vxe-toolbar perfect>
        <template #buttons>
          <div class="padding-tb-xs margin-bottom-xs">
            <span class="text-bold margin-right-xs">当前配置:</span>
            <span class="text-bold margin-right-xs text-red">检验模块</span>
            <span>\</span>
            <span class="text-bold margin-right-xs text-orange">维护管理</span>
            <span>\</span>
            <span class="text-bold margin-right-xs text-blue">分管类别维护</span>
          </div>
        </template>
        <template #tools>
          <vxe-button type="text" content="添加组" class="button-blue" @click="addTab(editableTabsValue)"></vxe-button>
        </template>
      </vxe-toolbar>
    </div>
    <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab">
      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
        <Splitpanes style="height:50vh">
          <Pane size="20">
            <div class="padding-lr-xs">
              <vxe-button type="text" content="输入框" class="button-blue margin-tb-xs" style="width:100%;"></vxe-button>
              <vxe-button type="text" content="复选框" class="button-blue margin-tb-xs" style="width:100%;"></vxe-button>
              <vxe-button type="text" content="单选按钮" class="button-blue margin-tb-xs" style="width:100%;"></vxe-button>
              <vxe-button type="text" content="开关按钮" class="button-blue margin-tb-xs" style="width:100%;"></vxe-button>
              <vxe-button type="text" content="下拉选择" class="button-blue margin-tb-xs" style="width:100%;"></vxe-button>
              <vxe-button type="text" content="长文本" class="button-blue margin-tb-xs" style="width:100%;"></vxe-button>
            </div>
          </Pane>
          <Pane size="60">
            <div class="padding-lr-xs">
              <vxe-form :data="formData" :items="formItems" titleColon>
                <template #myregion="{ data }">
                  <vxe-input v-model="data.region" placeholder="自定义插槽模板"></vxe-input>
                </template>
              </vxe-form>
            </div>
          </Pane>
          <Pane size="20">
            <div class="padding-lr-xs">
              <vxe-form title-width="65" ref="formRef" :data="formData" :loading="loading">
                <vxe-form-item title="字段编号" field="name" span="24">
                  <template #default="params">
                    <vxe-input v-model="params.data.name" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                  </template>
                </vxe-form-item>
                <vxe-form-item title="字段名" field="name" span="24">
                  <template #default="params">
                    <vxe-input v-model="params.data.name" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                  </template>
                </vxe-form-item>
                <vxe-form-item title="字段标题" field="name" span="24">
                  <template #default="params">
                    <vxe-input v-model="params.data.name" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                  </template>
                </vxe-form-item>
                <vxe-form-item title="占比" field="name" span="24">
                  <template #default="params">
                    <vxe-input v-model="params.data.name" placeholder="请输入0-24" clearable @change="changeEvent(params)"></vxe-input>
                  </template>
                </vxe-form-item>
                <vxe-form-item title="数据来源" field="sex" span="24" :item-render="{}" title-overflow>
                  <template #default="params">
                    <vxe-select v-model="params.data.sex" placeholder="请选择数据来源" clearable @change="changeEvent(params)">
                      <vxe-option value="1" label="字典"></vxe-option>
                      <vxe-option value="2" label="业务表"></vxe-option>
                    </vxe-select>
                  </template>
                </vxe-form-item>
              </vxe-form>
            </div>
          </Pane>
        </Splitpanes>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button @click="dialogVisible = false" type="primary">保存</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance } from 'vue';
import { VXETable, VxeFormPropTypes, VxeFormEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import { Splitpanes, Pane } from 'splitpanes';

defineExpose({ toggleDialog });
let { proxy }: any = getCurrentInstance();

interface FormDataVO {
  name: string
  nickname: string
  sex: string
  role: string
  age: number
  val1: string[]
  val2: boolean
  val3: string
  flag: boolean
  region: string
}

const formData = reactive<FormDataVO>({
  name: '',
  nickname: '',
  sex: '0',
  role: '',
  age: 22,
  val1: [],
  val2: false,
  val3: '',
  flag: false,
  region: ''
})

const formItems = ref<VxeFormPropTypes.Items>([
  {
    title: '左侧',
    span: 12,
    children: [
      { field: 'name', title: '属性1', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入属性1' } } },
      { field: 'sex', title: '属性2', span: 12, itemRender: { name: '$select', options: [{ value: '0', label: '女' }, { value: '1', label: '男' }], props: { placeholder: '请选择属性2' } } },
      { field: 'role', title: '属性3', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入属性3' } } },
      { field: 'age', title: '属性4', span: 24, itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入属性4' } } },
      { field: 'val1', title: '属性5', span: 24, itemRender: { name: '$checkbox', options: [{ label: '爬山', value: '11' }, { label: '健身', value: '22' }] } },
      { field: 'val2', title: '属性6', span: 24, itemRender: { name: '$checkbox' } },
      { field: 'val3', title: '属性7', span: 24, itemRender: { name: '$radio', options: [{ label: '是', value: 'Y' }, { label: '否', value: 'N' }] } },
      { field: 'flag', title: '属性8', span: 24, itemRender: { name: '$switch', props: { openLabel: '是', closeLabel: '否' } } },
      { field: 'region', title: '属性9', span: 24, itemRender: {}, slots: { default: 'myregion' } }
    ]
  },
  {
    title: '右侧',
    span: 12,
    children: [
      { field: 'nickname', title: '属性0', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入属性0' } } }
    ]
  },
  {
    align: 'center',
    span: 24,
    itemRender: {
      name: '$buttons',
      children: [
        // { props: { type: 'submit', content: '配置式表单', status: 'primary' } },
        // { props: { type: 'reset', content: '重置' } }
      ]
    }
  },
  {
    align: 'center',
    span: 24,
    children: [
      { field: 'remark', title: '备注', span: 24, itemRender: { name: '$textarea', props: { placeholder: '请输入备注' } } }
    ]
  }
])

/**
 * 切换弹窗显示隐藏
*/
const dialogVisible = ref(false);
function toggleDialog() {
  dialogVisible.value = !dialogVisible.value;
}
let tabIndex = 3;
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: '扩展属性1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: '扩展属性2',
    name: '2',
    content: 'Tab 2 content',
  }, {
    title: '扩展属性3',
    name: '3',
    content: 'Tab 2 content',
  }
])

function addTab(targetName: string) {
  const newTabName = `${++tabIndex}`;
  editableTabs.value.push({
    title: `扩展属性${newTabName}`,
    name: newTabName,
    content: 'New Tab content',
  })
  editableTabsValue.value = newTabName
}
function removeTab(targetName: string) {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
</script>
<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
